<template>
    <orh-table reload  @on-reload="refresh"
        search @on-search="searchmt" 
        pages :pageDate="pageDate"
        @on-page-change="queryData">
        <Table :columns="columns" :data="data" :loading="tableload" slot="table"></Table>
    </orh-table>
</template>
                
<script>
export default {
    components: {
    },
    data () {
        return {
            tableload:false,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            data:[],
            columns: [
                {
                    title: '类型',
                    align: 'center',
                    minWidth: 100,
                    key: 'type_name',
                    fixed:'left'
                },
                {
                    title: '学生',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let datas = params.row.student
                        let label = ''
                        datas.forEach((iten,num) => {
                            if(num != 0){
                                label += '，' + iten.student_name.zh
                            }else{
                                label += iten.student_name.zh != null?iten.student_name.zh:''
                            }
                        })
                        return h('div', label);
                    }
                },
                {
                    title: '添加人',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let label = params.row.created_by[0].teacher_name.zh
                        return h('div', label)
                    }
                },
                {
                    title: '添加时',
                    minWidth: 180,
                    align: 'center',
                    key: 'created_at',
                },
                {
                    title: '确认老师',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let state = params.row.updated_by
                        let label = ''
                        let color = ''
                        if(state != null) { 
                            label = state[0].teacher_name
                            color = '#19be6b'
                        }else{ 
                            label = '未确认'
                            color = '#f16543'
                        }
                        return h('div', {
                            style:{
                                color: color
                            }
                        }, label);
                    }
                },
                {
                    title: '细则',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let label = params.row.rules.entry_content
                        return h('div', label);
                    }
                },
                {
                    title: '细则类型',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let state = params.row.rules.classification
                        let label = ''
                        let color = ''
                        if(state == 1) { 
                            label = '加分' 
                            color = '#19be6b'
                        }else{ 
                            label = '减分'
                            color = '#f16543'
                        }
                        return h('div', {
                                style:{
                                    color: color
                                }
                            }, label);
                    }
                },
                {
                    title: '备注',
                    minWidth: 100,
                    align: 'center',
                    key: 'remarks',
                },
            ],
            url:'api/watchlist/v1/phoneticbeautytdata/classsdun?page=',
        }
    },
    methods: {

        // ==================================================
        // 搜索
        // ==================================================
        searchmt(str) {
            alert('暂无该功能')
            console.log('搜索内容'+str)
        },

        // ==================================================
        // 手动刷新
        // ==================================================
        refresh(){
            this.data = []
            this.tableload = true
            this.queryData(this.pageDate.current_page)
        },

        // ==================================================
        // 请求数据
        // ==================================================
        queryData(index){
            this.tableload = true
            this.$http.get(this.url + index).then(val=>{
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data
                this.tableload = false
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.tableload = false
            })
        },
    },
    mounted(){
        this.queryData(1)
    },
}
</script>